<template>
	<view class="basic">
		<view class="f-fc top">
			<view class="input-box flex1">
				<!-- 		<u-input style="height: 80rpx" v-model="keyword" placeholder="活动" shape="circle" border="surround">
					<image slot="prefix" :src="`${statusImgUrl}/image/message/1.png`" class="search-icon" mode=""></image>
					<image v-show="keyword" slot="suffix" @tap="keyword = ''" :src="`${imgUrl}/static/image/message/2.png`" class="close-icon" mode=""></image>
				</u-input> -->
			</view>
			<view class="f-fc read-but" @click="onAllread">
				<image :src="'/static/message/3.png'" class="read-icon" mode=""></image>
				<text style="line-height: 100%">全部已读</text>
			</view>
		</view>

		<!-- 消息列表 -->
		<itemMessageVue v-for="(item, index) in list" :data="item" @onDetail="onDetail(item)"></itemMessageVue>

		<emptyVue v-if="status != 'loading' && !list.length" tip="暂无消息"></emptyVue>

		<view class="mask" v-if="show" @click="show = false">
			<view class="in-box" @click.stop>
				<h2 style="margin-bottom: 20rpx; text-align: center">{{ curItem.title }}</h2>
				<view class="view">{{ curItem.content }}</view>
			</view>
		</view>
	</view>
</template>

<script>
import itemMessageVue from '@/components/itemMessage.vue';
import emptyVue from '@/components/empty.vue';
export default {
	components: { itemMessageVue, emptyVue },
	data() {
		return {
			keyword: '',
			// tabs: [
			// 	{ title: '全部', key: 'all' },
			// 	{ title: '系统公告', key: '1', dot: true },
			// 	{ title: '通知消息', key: '2', dot: true }
			// ],
			list: [],
			page: 0,
			status: 'loadmore',
			timer: null,
			show: false,
			curItem: {}
		};
	},
	onShow() {
		this.reLoad();
	},
	onReachBottom() {
		this.getList();
	},
	onHide() {
		clearTimeout(this.timer);
	},
	methods: {
		onDetail(item) {
			if (!item.is_read) {
				this.$http.get('/h5/user/readMessage/' + item.id);
				this.$set(item, 'is_read', 1);
			}
			this.curItem = item;

			this.show = true;
		},
		onAllread() {
			uni.showModal({
				title: '提示',
				content: '正在将所有消息设为已读，请确认是否继续?',
				confirmText: '确认',
				cancelText: '取消'
			})
				.then((res) => {
					if (res[1].confirm) {
						return this.$http.get('/h5/user/readMessage/0');
					} else {
						return Promise.reject();
					}
				})
				.then((res) => {
					return this.reLoad();
				});
		},

		onClickTab(key) {
			this.curTab = key;
			this.reLoad();
		},
		reLoad() {
			this.list = [];
			this.page = 1;
			this.status = 'loadmore';
			this.getList();
		},
		getList() {
			if (this.status != 'loadmore') return;
			uni.showLoading({
				mask: true
			});
			this.status = 'loading';
			this.$http
				.get('/h5/user/sendMessage', { page: this.page, type: this.curTab == 'all' ? '' : this.curTab })
				.then((res) => {
					console.log('this is getList===========>', res);
					const data = res.data;

					this.list = data;

					this.status = 'nomore';
				})
				.catch(() => {
					this.status = 'loadmore';
				})
				.finally(() => {
					uni.hideLoading();
				});
		}
	}
};
</script>

<style lang="scss" scoped>
.mask {
	position: fixed;
	z-index: 999;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.4);

	.in-box {
		width: 90vw;
		background: #fff;
		border-radius: 20rpx;
		padding: 20rpx 25rpx;
		.view {
			height: 50vh;
			overflow: auto;
		}
	}
}

.basic {
	padding: 20rpx 25rpx;
}

.top {
	margin-bottom: 20rpx;
	.input-box {
		margin-right: 48rpx;
	}
	.read-but {
		font-family: Source Han Sans, Source Han Sans;
		font-weight: 400;
		font-size: 24rpx;
		color: #151515;
		line-height: 34rpx;
		.read-icon {
			width: 28rpx;
			height: 28rpx;
			margin-right: 8rpx;
		}
	}
}
.tab-box {
	height: 100rpx;
	margin-bottom: 20rpx;
	justify-content: space-evenly;
	.item {
		.title {
			position: relative;
			font-family: Source Han Sans, Source Han Sans;
			font-weight: 400;
			font-size: 32rpx;
			color: #999999;
			line-height: 48rpx;
			margin-bottom: 4rpx;
			.dot {
				position: absolute;
				width: 12rpx;
				height: 12rpx;
				background: #fc4956;
				border-radius: 50%;
				top: 4rpx;
				right: -10rpx;
			}
		}
		.title-d {
			width: 0;
			height: 8rpx;
			background: #fda60b;
			border-radius: 2rpx 2rpx 2rpx 2rpx;
			transition: all 0.3s;
		}
	}

	.item-a {
		.title {
			font-weight: bold;
			font-size: 34rpx;
			color: #0b1f20;
		}
		.title-d {
			width: calc(100% - 18rpx);
		}
	}
}

.search-icon {
	width: 32rpx;
	height: 32rpx;
}
.close-icon {
	width: 32rpx;
	height: 32rpx;
}
</style>
